<template>
  <div class="order-list-container">
    <el-breadcrumb>
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item>房型颜色设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form>
        <el-form-item class="easy-table">
          <el-table :data="roomStatusHueList"
            style="width: 80%"
            max-height="600"
            >
            <el-table-column prop="id"
              label="编号"
              min-width="100">
            </el-table-column>
            <el-table-column prop="roomStatus"
              label="房态"
              min-width="100">
            </el-table-column>
            <el-table-column prop="staffStatus"
              label="员工端显示房态"
              min-width="150">
            </el-table-column>
            <el-table-column prop="hue"
              label="颜色"
              min-width="100">
              <template slot-scope="scope">
                <span style="width:30px;height:30px;margin-top:8px;"
                  :style="{background:scope.row.hue}"
                  class="fl"></span>
                <span class="handleBtn"
                  :style="{color:scope.row.hue}">{{scope.row.hue}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
              label="操作"
              width="150">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="openPouple_name(scope.row)"  v-has="'roomstatushue'" >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

      <el-dialog width="400px"
        title="编辑"
        :visible.sync="Pouple_name">
        <el-form :rules="rules"
          ref="colorData"
          :model="colorData">
          <el-form-item label="员工端房态名称"
            prop="staffStatus">
            <el-input type="text"
              v-model="colorData.staffStatus"></el-input>
          </el-form-item>
          <el-form-item label="颜色">
            <el-color-picker v-model="colorData.hue"
              class="fl"
              style="padding-top: 4px;"
              prop="hue"></el-color-picker>
          </el-form-item>
        </el-form>
        <div slot="footer"
          class="dialog-footer">
          <el-button type="primary"
            @click="updateRoomStatusHue('colorData')">确 定</el-button>
          <el-button @click="Pouple_name = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
const Breadcrumb = () => import("@/components/common/Breadcrumb");
import { getColorList, getRoomStatusHue } from "@/public/js/setting.js";

export default {
  components: {
    Breadcrumb
  },
  data() {
    return {
      content: {
        firstTitle: "设置",
        secondTitle: "房态颜色设置",
        type: "close"
      },
      roomStatusHueList: [],
      Pouple_name: false,
      staffStatusName: "",
      colorData: {},
      rules: {
        staffStatus: [
          { required: true, message: "请输入员工端房态名称", trigger: "blur" }
        ],
        hue: [{ required: true, message: "请输入颜色" }]
      }
    };
  },
  created() {
    this._getColorList();
  },

  mounted() {},
  methods: {
    _getColorList() {
      getColorList().then(res => {
        this.roomStatusHueList = res.data.roomStatusHueList;
        this.roomStatusHueList.forEach(item => {
          item.showBtn = false;
        });
      });
    },
    openPouple_name(data) {
      console.log(data);
      this.colorData = JSON.parse(JSON.stringify(data));
      this.Pouple_name = true;
    },
    // 修改
    updateRoomStatusHue(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {
            id: this.colorData.id,
            number: this.colorData.number,
            statusName: this.colorData.roomStatus,
            staffStatusName: this.colorData.staffStatus,
            hue: this.colorData.hue
          };
          getRoomStatusHue(data).then(res => {
            if (!res.data.errCode) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this._getColorList();
            }
            this.Pouple_name = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.order-warpper {
  .group-1 {
    width: 300px;
    display: inline-block;
    margin-right: 20px;
  }
  .group-2 {
    width: 250px;
    display: inline-block;
    margin-right: 20px;
  }
  .group-2 {
    width: 250px;
    display: inline-block;
    margin-right: 20px;
  }
  .group-3 {
    margin-top: 20px;
  }
  .btn {
    text-align: right;
  }
  .el-input__inner {
    height: 34px;
  }
  .search-button .el-button {
    padding: 9px 20px;
  }
}
.order-list-container {
  text-align: left;

  .el-date-editor--daterange.el-input__inner {
    padding: 0;
    padding-left: 10px;
    width: auto;
  }

  .el-input {
    width: auto;
  }

  .easy-search-other {
    width: 300px;
  }
}
.account-content {
  & > div {
    display: flex;
    padding-bottom: 15px;
    & > div {
      flex: 1;
    }
  }
}
.miNiCommListTable {
  border: 1px solid #ddd;
  border-right: 0;
  li {
    display: flex;
    border-bottom: 1px solid #ddd;

    div {
      flex: 1;
      line-height: 45px;
      font-size: 12px;
      text-indent: 23px;
      border-right: 1px solid #ddd;
    }
    &.header > div {
      background: #eef1f9;
      color: #415161;
    }
    & > .input-number .input-number-count {
      text-align: center;
      text-indent: 0;

      p {
        display: inline-block;
        background: #6d2377;
        height: 30px;
        line-height: 30px;
        width: 30px;
        border-radius: 5px 0 0 5px;
        color: #fff;
        cursor: pointer;
      }
      input {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: none;
        width: 30px;
        text-align: center;
        border: 1px solid #6d2377;
        box-sizing: border-box;
      }
    }
  }
}
.handleBtn {
  float: left;
  height: 47px;
  line-height: 47px;
  padding-left: 15px;
  color: #409eff;
}
</style>


